<template>
<el-dialog width="60%" top="70px" :visible.sync="visible" :title="dataForm.details ? '详情' :(!dataForm.id ? $t('add') : $t('update'))" :close-on-click-modal="false" :close-on-press-escape="false" @close="close()" :destroy-on-close="true" @opened="opened()">
    <el-form class="dialogInner" :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()" :label-width="$i18n.locale === 'en-US' ? '140px' : '130px'" :disabled="disabled">
        <el-row>
            <el-col :span="12">
                <el-form-item label="企业名称" prop="name">
                    <el-input v-model="dataForm.name" :placeholder="disabled?'':'企业名称'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="企业编码" prop="code">
                    <el-input v-model="dataForm.code" :placeholder="disabled?'':'企业编码'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="企业法人" prop="legalPerson">
                    <el-input v-model="dataForm.legalPerson" :placeholder="disabled?'':'企业法人'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="实际经营人类型" prop="operatorType">
                    <ren-select v-model="dataForm.operatorType" dict-type="hotel_operator_type" placeholder="请选择"></ren-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="实际经营人姓名" prop="operatorName">
                    <el-input v-model="dataForm.operatorName" :placeholder="disabled?'':'实际经营人姓名'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="经营人单位名称" prop="operatorUnit">
                    <el-input v-model="dataForm.operatorUnit" :placeholder="disabled?'':'经营人单位名称'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="统一社会信用代码" prop="creditCode">
                    <el-input v-model="dataForm.creditCode" :placeholder="disabled?'':'经营单位法人和其他组织统一社会信用代码'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="经营人证件类型" prop="operatorCardType">
                    <ren-select v-model="dataForm.operatorCardType" dict-type="hotel_operator_card_type" placeholder="请选择"></ren-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="派出所代码" prop="policeCode">
                    <el-input v-model="dataForm.policeCode" :placeholder="disabled?'':'派出所代码'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="产权人类型" prop="ownerType">
                    <ren-select v-model="dataForm.ownerType" dict-type="hotel_owner_type" placeholder="请选择"></ren-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="经营人证件号" prop="operatorCard">
                    <el-input v-model="dataForm.operatorCard" :placeholder="disabled?'':'经营人证件号'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="注册登记号" prop="registerNo">
                    <el-input v-model="dataForm.registerNo" :placeholder="disabled?'':'注册登记号'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="经营项目" prop="operateProject">
                    <el-input v-model="dataForm.operateProject" :placeholder="disabled?'':'经营项目'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="营业时间" prop="operateTime">
                    <el-input v-model="dataForm.operateTime" :placeholder="disabled?'':'营业时间'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系人姓名" prop="linkName">
                    <el-input v-model="dataForm.linkName" :placeholder="disabled?'':'联系人姓名'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="联系人号码" prop="linkPhone">
                    <el-input v-model="dataForm.linkPhone" :placeholder="disabled?'':'联系人号码'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="餐饮类型" prop="type">
                    <!-- <ren-select v-model="dataForm.type" :multiple="true" dict-type="food_type" placeholder="请选择"></ren-select> -->
                    <ren-select v-model="dataForm.typeList" :multiple="true" dict-type="food_type" placeholder="请选择"></ren-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="星级" prop="star">
                    <el-input v-model="dataForm.star" type="number" :placeholder="disabled?'':'星级'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="评分" prop="score">
                    <el-input v-model="dataForm.score" type="number" :placeholder="disabled?'':'评分'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="最低价（人均）" prop="minPrice">
                    <el-input v-model="dataForm.minPrice" type="number" :placeholder="disabled?'':'最低价（人均）'"></el-input>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="营业时间范围" prop="">
                    <el-time-picker style="width:48%;margin:0 1%" value-format="HH:mm:ss" v-model="startTime" placeholder="选择时间">
                    </el-time-picker>
                    <el-time-picker style="width:48%;margin:0 1%" value-format="HH:mm:ss" v-model="endTime" placeholder="选择时间">
                    </el-time-picker>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="所属区域" prop="areaCode;">
                    <el-select v-model="dataForm.areaCode" placeholder="所属区域" clearable style="width:100%">
                        <el-option v-for="item in scenicOptions" :key="item.id" :label="item.scenicName" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="12">
                <el-form-item label="地理位置" prop="isMapId">
                    <el-select v-model="dataForm.isMapId" placeholder="请选择状态" clearable style="width:100%">
                        <el-option v-for="item in mapPos" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="24">
                <el-form-item label="所在地址" prop="">
                    <el-select style="width:15%" v-model="dataForm.province" placeholder="省编码" clearable @change="
                    (val) => {
                      regionChange(val, 'province');
                    }
                  ">
                        <el-option v-for="item in provinceOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select style="width:15%;margin:0 1%" v-model="dataForm.city" placeholder="市" clearable @change="
                    (val) => {
                      regionChange(val, 'city');
                    }
                  ">
                        <el-option v-for="item in cityOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-select style="width:15%" v-model="dataForm.area" placeholder="区" clearable @change="
                    (val) => {
                      regionChange(val, 'area');
                    }
                  ">
                        <el-option v-for="item in areaOptions" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                    <el-input v-model="dataForm.street" placeholder="街道" style="width: 15%; margin: 0 1%">
                    </el-input>
                    <el-input v-model="dataForm.areaDetail" placeholder="请输入详细地址" style="width: 36%"></el-input>
                </el-form-item>
            </el-col>
             <el-col :span="24">
                <p class="pdl60">商家店铺图<span>(支持png、jpg，建议尺寸750*420px，最多10张)</span></p>
            </el-col>
            <el-col :span="24">
                <el-form-item prop="">
                    <el-upload :action="url" :file-list="fileList" :limit="10" :before-upload="beforeUploadHandle" list-type="picture-card" :on-success="successHandle" :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                </el-form-item>
            </el-col>
            
        </el-row>
    </el-form>
    <template slot="footer" v-if="!disabled">
        <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
        <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
</el-dialog>
</template>

<script>
import Cookies from "js-cookie";
import debounce from "lodash/debounce";
import mixinRegionModule from "@/mixins/region-module";
import mapdiv from "../map-data/map";
export default {
    mixins: [mixinRegionModule],

    data() {
        return {
            activeName: 'first',
            visible: false,
            startTime: '',
            endTime: '',
            scenicOptions: [],
            fileList: [],
            url: `${
        window.SITE_CONFIG["apiURL"]
      }/oss/file/aliyunUpload?access_token=${Cookies.get("access_token")}`,
            num: 0,
            dataForm: {
                minPrice: '',
                score: '',
                areaCode: '',
                areaName: '',
                longitude: '',
                latitude: '',
                operateTimeRange: '',
                coverImageList: [],
                id: "",
                name: "",
                code: "",
                legalPerson: "",
                operatorType: "",
                operatorName: "",
                operatorUnit: "",
                creditCode: "",
                operatorCardType: "",
                policeCode: "",
                ownerType: "",
                operatorCard: "",
                registerNo: "",
                operateProject: "",
                operateTime: "",
                province: "",
                isMapId:'',
                city: "",
                area: "",
                street: "",
                areaDetail: "",
                linkName: "",
                linkPhone: "",
                type: "",
                typeList:[],
                star: "",
                remark: "",
            },
            mapPos: [],
        };
    },
    props: {
        disabled: Boolean
    },

    computed: {
        dataRule() {
            return {};
        },
    },
    components: {
        mapdiv
    },
    methods: {
        getMapPos() {
            this.$http.get('/sys/ismap/pageNoPro?type=3&page=1&limit=-1').then(res => {
                console.log(res)
                if (res.data.code == 0) {
                    this.mapPos = res.data.data.list;
                }
            })
        },
        //移除图片
        handleRemove(file, fileList) {
            this.fileList = fileList.map((item) => {
                return item.url;
            });
        },
        // 上传之前
        beforeUploadHandle(file) {
            if (
                file.type !== "image/jpg" &&
                file.type !== "image/jpeg" &&
                file.type !== "image/png" &&
                file.type !== "image/gif"
            ) {
                this.$message.error(this.$t("upload.tip", {
                    format: "jpg、png、gif"
                }));
                return false;
            }
        },
        // 上传成功
        successHandle(res, file, fileList) {
            if (res.code !== 0) {
                return this.$message.error(res.msg);
            }
            this.fileList.unshift({
                name: "",
                url: res.data.url,
            });

        },
        //景区数据list
        getScenicOptions() {
            this.$http.get("/scenic/isscenic/page", {}).then(({
                data: res
            }) => {
                if (res.msg == "success") {
                    this.scenicOptions = res.data.list;
                }
            });
        },
        opened() {
            this.provincAreaDetailInfoList();
            this.getScenicOptions();
            if (this.dataForm.city) {
                this.cityAreaDetailInfoList(this.dataForm.province);
            }
            if (this.dataForm.area) {
                this.countyAreaDetailInfoList(this.dataForm.city);
            }
        },
        close() {
            this.startTime = "";
            this.endTime = "";
            this.fileList = [];
            this.dataForm = {
                minPrice: '',
                score: '',
                areaCode: '',
                areaName: '',
                longitude: '',
                latitude: '',
                operateTimeRange: '',
                coverImageList: [],
                id: "",
                name: "",
                code: "",
                legalPerson: "",
                operatorType: "",
                operatorName: "",
                operatorUnit: "",
                creditCode: "",
                operatorCardType: "",
                policeCode: "",
                ownerType: "",
                operatorCard: "",
                registerNo: "",
                operateProject: "",
                operateTime: "",
                province: "",
                city: "",
                area: "",
                street: "",
                areaDetail: "",
                linkName: "",
                linkPhone: "",
                type: "",
                typeList:[],
                star: "",
                remark: "",
            };
            this.$emit("changeDisabled");
        },
        init() {
            this.visible = true;
            this.getMapPos();
            this.$nextTick(() => {
                this.$refs["dataForm"].resetFields();
                if (this.dataForm.id) {
                    this.getInfo();
                }
            });
        },
        // 获取信息
        getInfo() {
            this.$http
                .get("/sys/isfood/" + this.dataForm.id)
                .then(({
                    data: res
                }) => {
                    if (res.code !== 0) {
                        return this.$message.error(res.msg);
                    }
                    this.dataForm = {
                        ...this.dataForm,
                        ...res.data,
                    };
                    //时间范围
                    // this.dataForm.operatorType = this.dataForm.operatorType + "";
                    // this.dataForm.operatorCardType = this.dataForm.operatorCardType + "";
                    // this.dataForm.ownerType = this.dataForm.ownerType + "";
                    // this.dataForm.type = this.dataForm.type + "";
                    // this.$refs.operatorType.selectValue = this.dataForm.operatorType;
                    // this.$refs.operatorCardType.selectValue = this.dataForm.operatorCardType;
                    // this.$refs.ownerType.selectValue = this.dataForm.ownerType;
                    // this.$refs.type.selectValue = this.dataForm.type;
                    //时间范围
                    let operateTimeRange = this.dataForm.operateTimeRange.split('-');
                    this.startTime = operateTimeRange[0];
                    this.endTime = operateTimeRange[1];
                    // 图片处理
                    if (this.dataForm.coverImageList.length == 0) {
                        this.fileList = [];
                    } else if (this.dataForm.coverImageList) {
                        this.fileList = this.dataForm.coverImageList.map((item, index, arr) => {
                            let json = {};
                            json.name = "";
                            json.url = item;
                            return json;
                        });
                    }

                })
                .catch(() => {});
        },
        // 表单提交
        dataFormSubmitHandle: debounce(
            function () {
                this.$refs["dataForm"].validate((valid) => {
                    if (!valid) {
                        return false;
                    }
                    // 时间范围
                    this.dataForm.operateTimeRange = this.startTime + '-' + this.endTime;
                    //图片处理
                    this.dataForm.coverImageList = this.fileList.map((item) => {
                        return item.url;
                    });
                    let d = this.scenicOptions.filter((item) => item.id == this.dataForm.areaCode);
                    if (d.length != 0) {
                        this.dataForm.areaName = d[0].scenicName
                    }
                    this.$http[!this.dataForm.id ? "post" : "put"](
                            "/sys/isfood/",
                            this.dataForm
                        )
                        .then(({
                            data: res
                        }) => {
                            if (res.code !== 0) {
                                return this.$message.error(res.msg);
                            }
                            this.$message({
                                message: this.$t("prompt.success"),
                                type: "success",
                                duration: 500,
                                onClose: () => {
                                    this.visible = false;
                                    this.$emit("refreshDataList");
                                },
                            });
                        })
                        .catch(() => {});
                });
            },
            1000, {
                leading: true,
                trailing: false
            }
        ),
    },
};
</script>
